<template>
    <section v-loading="loading" class="cms-body">
           <!-- 返回组件 -->
        <cms-back></cms-back>   
        <el-form v-show="next" ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">
            <el-form-item label="菜单名称" class="flex-50"  prop="name">
               <el-input v-model="dataInfo.name" class="cms-width"></el-input>
            </el-form-item>
            <el-form-item label="排列顺序" class="flex-50"  prop="priority">
               <el-input v-model="dataInfo.priority" class="cms-width" type="number"></el-input>
            </el-form-item>
            <el-form-item label="启用" class="flex-50" prop="enable">
                <el-radio-group v-model="dataInfo.enable">
                     <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="工作流" class="flex-50"  prop="workflowId">
                <el-select  class="cms-width" v-model="dataInfo.workflowId">
                        <el-option label="默认" value=""></el-option> 
                        <el-option v-for="item in workflowList" :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>    
                </el-select>
            </el-form-item>
            <el-form-item label="提交表单展示模板" class="flex-50"  prop="submitUrl">
                <el-select  class="cms-width" v-model="dataInfo.submitUrl">
                        <el-option v-for="item in tplList" :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        ></el-option>    
                </el-select>
            </el-form-item>
             <el-form-item label="提交列表展示模板" class="flex-50"  prop="viewUrl">
                <el-select  class="cms-width" v-model="dataInfo.viewUrl">
                        <el-option v-for="item in recordTplList" :key="item.id"
                            :label="item.name"
                            :value="item.name"
                        ></el-option>    
                </el-select>
            </el-form-item>
            <el-form-item label="是否会员菜单" class="flex-50" prop="memberMeun">
                <el-radio-group v-model="dataInfo.memberMeun">
                     <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否全站" class="flex-50" prop="allSite">
                <el-radio-group v-model="dataInfo.allSite">
                     <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="每日限制提交数" class="flex-50"  prop="dayLimit">
                <el-input v-model="dataInfo.dayLimit" type="number" class="cms-width"></el-input>
                <span class="gray"> 默认为0,为0不限制</span>
            </el-form-item>
             <el-form-item label="发起时间范围" class="flex-50" >
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                :editable="false"
                align="right"
                value-format = "yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="changeTime()"
                :picker-options="pickerOptions2" class="cms-width">
                </el-date-picker>
            </el-form-item>     
            <div class="form-footer">
               <el-button type="warning" @click="nextStep()"              
                >下一步</el-button>
               
           </div>

        </el-form>
         <div v-show="!next" class="com-box"> 
            <div class="com-left">
                <h1 class="com-h1">基础组件</h1>
                <ul class="com-ul"> 
                    <li @click="component(1)"> <img src="static/images/form_input.png" alt=""></li>
                    <li @click="component(4)"><img src="static/images/form_area.png" alt=""></li>
                     <li @click="component(6)"><img src="static/images/form_select.png" alt=""></li>
                     <li @click="component(8)"> <img src="static/images/form_radio.png" alt=""></li>
                    <li @click="component(7)"> <img src="static/images/form_checkbox.png" alt=""></li>
                     <li @click="component(5)"> <img src="static/images/form_date.png" alt=""></li>
                    <li @click="component(10)"> <img src="static/images/form_upload.png" alt=""></li>
                    <li @click="component(9)"> <img src="static/images/form_file.png" alt=""></li>      
                </ul> 
            </div>
            <div class="com-right">
                  <h1 class="com-view">表单预览 <span>(可上下拖动组件调整显示顺序,双击修改表单信息)</span> </h1>
                  <el-form  ref="form1" class="cms-form" label-width="162px" style="margin:0">                
                  <ul style="width:100%">
                   <li v-for="(item,index) in filedsArray"  v-on:dblclick="edit(item.id,index)"
                    v-dragging="{ item: item, list: filedsArray, group: 'item'}" :key="index" 
                    class="drag-items"
                    >        
                      <div class="com-delete"  @click="deleteIndex(index,item.id)">
                          <cms-button type="delete" ></cms-button>
                          <span>删除</span> 
                      </div>
                      <el-form-item :key='index' :label="item.name" class="flex-100">
                         <!-- 文本框 --> 
                         <el-input v-if="item.type==1" :readonly='true' v-model="item.value" class="cms-width"></el-input>
                          <!-- 电话 --> 
                         <el-input v-if="item.type==11" :readonly='true' v-model="item.value" class="cms-width"></el-input>
                          <!-- 邮箱 --> 
                         <el-input v-if="item.type==12" :readonly='true' v-model="item.value" class="cms-width"></el-input>
                         <!-- 数字 -->
                         <el-input v-if="item.type==2" :readonly='true' v-model="item.value" class="cms-width" type="number"></el-input>     
                         <!-- 浮点形文本 -->
                         <el-input class="cms-width" :readonly='true' v-model="item.value"
                                 v-if="item.type==3"
                         ></el-input>                          
                         <!-- 文本 -->
                         <el-input
                          v-if="item.type==4"
                          :readonly='true'
                          type="textarea"
                          :rows="3"
                          placeholder="请输入内容"
                          class="cms-width"
                          v-model="item.value">
                        </el-input>   
                        <!-- 复选框 -->  
                        <el-checkbox-group :readonly='true' v-model="item.value"  
                            v-if="item.type==7">
                                <el-checkbox 
                                v-for="(opt,optIndex) in item.optValue" :key="optIndex"                
                                :label="opt"></el-checkbox> 
                        </el-checkbox-group>        
                        <!-- 单选框 -->
                        <el-radio-group :readonly='true'  v-model="item.value"  
                            v-if="item.type==8">
                                <el-radio :label="opt"  v-for="(opt,optIndex) in item.optValue" :key="optIndex" >                   
                           </el-radio>    
                        </el-radio-group > 
                         <!-- 日期 -->
                        <el-date-picker :readonly='true' class="cms-width" v-model="item.value" 
                                type="date" value-format="yyyy-MM-dd"
                                v-if="item.type==5"
                        ></el-date-picker>    
                         <!-- 自定义图片-->
                        
                        <el-button type="primary" v-if="item.type==10">上传图片</el-button>

                         <!-- 下拉列表 -->
                        <el-select :disabled='true' class="cms-width" v-model="item.value" 
                                    v-if="item.type==6">
                            <el-option v-for="(opt,optIndex) in item.optValue" :key="optIndex"
                                    :label="opt" :value="opt">
                            </el-option>
                        </el-select>     
                        <el-button type="primary" v-if="item.type==9">上传附件</el-button>
                      </el-form-item>
                    </li> 
                    </ul>  
                  </el-form>
                  <div class="form-footer">
                           <el-button type="primary" @click="publish()" >发布</el-button>
                  </div>
            </div>
        </div>

       <!-- 选择字段弹窗 -->
      <el-dialog
        title="请添加字段"
        :visible.sync="dialogVisible"
        width="40%"
        >
       <el-form ref='formSave' :model='saveForm' :rules="rules" label-width="80px"  >
           <el-form-item label="字段"  prop="field">
                <el-input v-model="saveForm.field"></el-input>
            </el-form-item>
            <el-form-item label="名称"  prop="label">
                <el-input  v-model="saveForm.label" ></el-input>
            </el-form-item>
             <el-form-item label="数据类型:" prop="dataType">
               <el-select v-model="saveForm.dataType"  :disabled="isCheck" style="width:100%">
                  <el-option label="字符串文本" :value="1"></el-option>
                  <el-option label="整形文本" :value="2"></el-option>
                  <el-option label="浮点形文本" :value="3"></el-option>
                   <el-option label="电话" :value="11"></el-option>     
                  <el-option label="邮箱" :value="12"></el-option>
                  <el-option label="文本区" :value="4"  :disabled="true"></el-option>
                  <el-option label="日期" :value="5"  :disabled="true"></el-option>
                  <el-option label="下拉列表" :value="6"   :disabled="true"></el-option>
                  <el-option label="复选框" :value="7"  :disabled="true"></el-option>
                  <el-option label="单选框" :value="8"  :disabled="true"></el-option>
                  <el-option label="附件" :value="9"  :disabled="true"></el-option>
                  <el-option label="图片" :value="10"  :disabled="true"></el-option>                                    
               </el-select>
            </el-form-item>  
            <el-form-item label="默认值"  prop="defValue">
                <el-input  v-model="saveForm.defValue" ></el-input>
            </el-form-item>
             <el-form-item label="可选项:" class="flex-100"  prop="optValue" >
               <el-input  v-model="saveForm.optValue" ></el-input> 
                <span class="gray">多个值用","分开</span> 
            </el-form-item> 
            <el-form-item label="描述"  prop="description">
                <el-input  v-model="saveForm.description" ></el-input>
            </el-form-item>
            <el-form-item v-show="saveForm.dataType!=4&&saveForm.dataType!=7&&saveForm.dataType!=9&&saveForm.dataType!=10" label="列表展示"  prop="displayInList">
                <el-radio v-model="saveForm.displayInList" :label="true">是</el-radio>
                <el-radio v-model="saveForm.displayInList" :label="false">否</el-radio>
                <span class="gray">选是会在提交记录列表中展示</span> 
            </el-form-item> 
            <el-form-item label="是否必填"  prop="required">
                <el-radio v-model="saveForm.required" :label="true">是</el-radio>
                <el-radio v-model="saveForm.required" :label="false">否</el-radio>
            </el-form-item>     
       </el-form>  
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ok()">确 定</el-button>
        </span>
      </el-dialog>
       <!-- 修改字段弹窗 -->
      <el-dialog
        title="修改字段"
        :visible.sync="dialogEdit"
        width="30%"
        >
         <el-form ref='formEdit' :model='editObj' :rules="rules" label-width="80px"  >
            <el-form-item label="字段">
                <el-input :readonly='true' v-model="editObj.field" ></el-input>
            </el-form-item>
            <el-form-item label="名称"  prop="label">
                <el-input  v-model="editObj.label" ></el-input>
            </el-form-item>
            <el-form-item label="默认值"  prop="defValue">
                <el-input  v-model="editObj.defValue" ></el-input>
            </el-form-item>
             <el-form-item label="可选项:" class="flex-100"  prop="optValue" >
               <el-input  v-model="editObj.optValue" class="cms-width"></el-input> 
                <span class="gray">多个值用","分开</span> 
            </el-form-item> 
            <el-form-item label="描述"  prop="description">
                <el-input  v-model="editObj.description" ></el-input>
            </el-form-item>
             <el-form-item v-show="editObj.dataType!=4&&editObj.dataType!=7&&editObj.dataType!=9&&editObj.dataType!=10" label="列表展示"  prop="displayInList">
                <el-radio v-model="editObj.displayInList" :label="true">是</el-radio>
                <el-radio v-model="editObj.displayInList" :label="false">否</el-radio>
                <span class="gray">选是会在提交记录列表中展示</span> 
            </el-form-item> 
             <el-form-item label="是否必填"  prop="required">
                <el-radio v-model="editObj.required" :label="true">是</el-radio>
                <el-radio v-model="editObj.required" :label="false">否</el-radio>
            </el-form-item>
           
        </el-form>  

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogEdit = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </span>
      </el-dialog>
    </section> 
</template>

<script>
import listMixins from "@/mixins/form";
import axios from "axios";
import api from "@/api/api";
import VueDND from "awe-dnd";
import va from "@/rules";
export default {
  mixins: [listMixins],
  data() {
    let required = va.required();
    let string = va.string("只能输入字母");
    return {
      params: {
        //只需要业务参数
        modelId: 88,
        isChannel: false, //是否为栏目模型
        modelName: ""
      },
      tplParams: {
        //模板参数
        pageNo: 1,
        pageSize: 20,
        root: "/WEB-INF/t/cms/www/default/custom_form"
      },
      recordTplParams: {
        //记录模板参数
        pageNo: 1,
        pageSize: 20,
        root: "/WEB-INF/t/cms/www/default/custom_record"
      },
      customId: "",
      rules: {
        name: [required],
        label: [required],
        viewUrl: [required],
        submitUrl: [required],
        priority: [required],
        field: [required, string],
        dayLimit: [required]
      },
      dialogVisible: false,
      dialogEdit: false,
      next: true,
      dateRange: [],
      filedsArray: [],
      fileds: [],
      tplList: [], //模板列表
      recordTplList: [], //记录模板列表
      editObj: "",
      saveForm: {},
      workflowList: [],
      editIndex: "",
      value: "",
      isCheck:false,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    getDataInfo(id) {
      let api = this.$api; //API地址
      axios
        .all([
          axios.post(api.customFormGet, { id: id }), //axios批量发送请求
          axios.post(api.workflowList, { pageSize: 0, pageNo: 10 }), //工作流
          axios.post(api.templateList, this.tplParams), //模板,
          axios.post(api.templateList, this.recordTplParams) //记录模板
        ])
        .then(
          axios.spread((res, workflows, tplAll, recordTpl) => {
            this.dataInfo = res.body;
            this.dataInfo.enable=true;
            this.dataInfo.priority = 10;     
            this.workflowList = workflows.body; //工作流
            this.tplList = tplAll.body; //自定义表模板
            if(this.tplList.length>0){
              this.dataInfo.submitUrl = this.tplList[0].name;
            }           
            this.recordTplList = recordTpl.body; //自定义表记录列表模板
            if(this.recordTplList.length>0){
              this.dataInfo.viewUrl = this.recordTplList[0].name;
            }
            this.loading = false;
          })
        )
        .catch(err => {
          this.loading = false;
        });
    },
    component(val) {
      //dataType:1 字符串文本  2 整形文本 3 浮点形文本
      // 4 文本区 5 日期 6 下拉列表 7 复选框
      // 8 单选框 9 附件 10 图片 11 电话 12 邮箱
    if(val==1){
        this.isCheck=false
    }else{
        this.isCheck=true
    }   
      this.loading = true;
      axios
        .post(this.$api.customFiledGet, { id: 0 })
        .then(res => {
          res.body.dataType = val;
          this.saveForm = res.body;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
      this.dialogVisible = true;
    },
    ok() {
      let form = this.$refs["formSave"];
      form.validate(valid => {
        //验证方法
        if (valid) {
          this.loading = true;
          this.saveForm.formId = this.customId;
          axios
            .post(this.$api.customFiledSave, this.saveForm)
            .then(res => {
              if (res.code == "200") {
                let obj = {
                  field: "",
                  value: "",
                  name: "",
                  type: "",
                  priority: "",
                  required: "",
                  optValue: "",
                  id: "",
                  displayInList: ""
                };
                obj.field = this.saveForm.field;
                obj.name = this.saveForm.label;
                obj.type = this.saveForm.dataType;
                obj.priority = this.saveForm.priority;
                obj.required = this.saveForm.required;
                obj.displayInList = this.saveForm.displayInList;
                obj.id = res.body.id;
                if (
                  this.saveForm.dataType == 7 ||
                  this.saveForm.dataType == 8 ||
                  this.saveForm.dataType == 6
                ) {
                  if (this.saveForm.dataType == 7) {
                    obj.value = this.saveForm.defValue.split(",");
                  } else {
                    obj.value = this.saveForm.defValue;
                  }
                  obj.optValue = this.saveForm.optValue.split(",");
                } else {
                  obj.value = this.saveForm.defValue;
                  obj.optValue = this.saveForm.optValue;
                }
                this.filedsArray.push(obj);
              }
              this.loading = false;
              this.dialogVisible = false;
            })
            .catch(err => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    getFieldImg(val) {
    },
    deleteIndex(index, id) {
      this.loading = true;
      axios
        .post(this.$api.customFiledDelete, { ids: id })
        .then(res => {
          if (res.code == "200") {
            this.filedsArray.splice(index, 1);
            this.loading = false;
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    nextStep() {
      this.loading = true;
      let form = this.$refs["form"];
      form.validate(valid => {
        //验证方法
        if (valid) {
          axios
            .post(this.$api.customFormSave, this.dataInfo)
            .then(res => {
              this.customId = res.body.id;
              this.next = false;
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
            });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    publish() {
      let ids = [];
      let prioritys = [];
      let backUrl = "list";
      for (let x in this.filedsArray) {
        ids.push(this.filedsArray[x].id);
        prioritys.push(parseInt(x) + 1);
      }
      ids = ids.join(",");
      prioritys = prioritys.join(",");
      this.loading = true;
      if(ids.length>0){
        axios
          .post(this.$api.customFiledPriority, {
            ids: ids,
            priorities: prioritys
          })
          .then(res => {
            this.loading = false;
            if (res.code == "200") {
              this.successMessage("保存成功");
              if (backUrl == "") {
                return false;
              } else {
                setTimeout(() => {
                  this.routerLink(backUrl);
                }, 1000);
              }
            }
          })
          .catch(error => {
            this.loading = false;
          });
       }else{
         this.routerLink("list");
       }   
    },
    changeTime() {
      if (this.dateRange.length > 0) {
        this.dataInfo.startTime = this.dateRange[0];
        this.dataInfo.endTime = this.dateRange[1];
      }
    },
    edit(val, index) {
      this.loading = true;
      this.editObj = "";
      axios
        .post(this.$api.customFiledGet, { id: val })
        .then(res => {
          this.editObj = res.body;
          this.editIndex = index;
          this.dialogEdit = true;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    update() {
      let form = this.$refs["formEdit"];
      form.validate(valid => {
        //验证方法
        if (valid) {
          this.loading = true;
          this.editObj.formId = this.customId;
          axios
            .post(this.$api.customFiledUpdate, this.editObj)
            .then(res => {
              this.loading = false;
              if (res.code == "200") {
                this.dialogEdit=false;  
                this.filedsArray[this.editIndex].name=this.editObj.label;                              
                this.filedsArray[this.editIndex].required=this.editObj.required;
                this.filedsArray[this.editIndex].description=this.editObj.description;
                this.filedsArray[this.editIndex].displayInList=this.editObj.displayInList; 
                if(this.editObj.dataType==7||this.editObj.dataType==8||this.editObj.dataType==6){
                    if(this.editObj.dataType==7){
                        this.filedsArray[this.editIndex].value=this.editObj.defValue.split(',');  
                    }else{
                        this.filedsArray[this.editIndex].value=this.editObj.defValue;  
                    }
                        this.filedsArray[this.editIndex].optValue=this.editObj.optValue.split(','); 
                }else{
                    this.filedsArray[this.editIndex].value=this.editObj.defValue;  
                    this.filedsArray[this.editIndex].optValue=this.editObj.optValue;    
                }          
              }
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  },
  created() {
    this.getDataInfo(this.id);
  },
   mounted(){
        let clientHeight=document.body.clientHeight;
          $('.com-left').css('minHeight',(clientHeight-110)+'px');
   }
};
</script>
    
<style scoped>
.com-box{
 min-height: 100%;
 overflow: hidden;
}

.com-left {
  width: 280px;
  float: left;
    height: 100%;
  border-right: 1px solid lightGray;
}
.com-right {
margin-left: 280px;
 padding: 0 20px;
}
.com-right .cms-form .el-form-item{
 border: none;
}
.com-h1 {
    width: 100%;
    background: #f7f7f7;
    font-size: 14px;
    color: #656565;
   text-align: center;
   font-weight:500;
   height: 46px;
   line-height: 46px;
}
.com-view{
    font-weight:500;
    width: 100%;
    height: 46px;
    color: #656565;
    font-size:14px;
    line-height: 46px;
    border-bottom: 1px dashed #e7ecf3;
}
.com-view span{
  font-size: 12px;
  color: #999;
}
.com-ul {
  text-align: center;  
  border-left: 1px solid #d9dfe2;
}
.drag-items{
    cursor: pointer;
    position: relative;
    border: 1px dashed transparent;
}
.drag-items:hover{
    background: #f6fbfd;
    border: 1px dashed #e4f0f6;
}
.com-delete {
   position: absolute;
    right:25px;
    top: 19px;
    z-index: 666;
}
.com-delete >span{
    font-size: 12px;
    color: #656565;
    position: relative;
    top: 2px;
}
.com-width {
  
}
.com-left li {
  float: left;
  width: 70px;
  height: 70px;
  margin: 10px 5px 10px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.com-ul li:hover {
  border: 1px solid #cde3ed;
  background: #f6fbfd;
}
</style>